<template>
  <div>
    <div class="sub-project">
      <div class="sub-title">
        <div class="sub-title-name">区域信息</div>
      </div>
      <div class="sub-body">
        <el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所在建筑" prop="buildingIdDe" v-if="!readOnly && showBuildingId">
                <el-select v-model="buildingId" placeholder="请选择所在建筑"
                           class="customSelect form-item lable_width" @change="selectBuildingId">
                  <el-option
                    v-for="dict in buildingList"
                    :key="dict.id"
                    :label="dict.buildingName"
                    :value="dict.id"
                  ></el-option>
                </el-select>

              </el-form-item>
              <el-form-item label="所在建筑：" prop="buildingIdDe" v-if="readOnly && showBuildingId "
                            class="custom-form-item">
                {{ parentIdFormatter }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计量区域" prop="buildingName" v-if="!readOnly"
                            class="custom-form-item">
                <treeselect
                  ref="treeselect"
                  v-model="buildId"
                  :options="buildingOptionsChild"
                  :normalizer="normalizer"
                  :show-count="true"
                  placeholder="选择计量区域"
                />
              </el-form-item>
              <el-form-item label="计量区域：" prop="buildingName" v-if="readOnly"
                            class="custom-form-item">
                {{ idFormatter }}
              </el-form-item>


            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24 ">
              <el-form-item label="层级关系" prop="area" v-if="!readOnly">
                <el-input v-model="area" placeholder="" disabled/>
              </el-form-item>
              <el-form-item label="层级关系：" prop="area" v-if="readOnly" class="custom-form-item">
                {{ area }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listBuildChildrenShowMaxWithParent} from "@/api/components/building/building";
import {handleTree} from "@/utils/ruoyi";

export default {
  name: "showinfo3",
  components: {Treeselect},
  props: {
    readOnly: {
      type: Boolean,
      default: false
    },
    showBuildingId: {
      type: Boolean,
      default: false
    },
    buildingList: {
      type: Array,
      default: []
    },
    iniBuildingId: {
      type: String
    },
    iniBuildId: {
      type: String
    }
  },
  data() {
    return {
      //计量区域选项
      buildingOptionsChild: [],
      buildingOptionsChildList: [],
      form: {},
      buildingId: undefined,
      buildId: undefined
    }
  },
  computed: {
    area() {
      var index = this.buildingOptionsChildList.findIndex(item => item.id === this.buildId)
      if (index !== -1) {
        return this.buildingOptionsChildList[index].area
      } else {
        return ''
      }
    },
    //所在建筑
    parentIdFormatter() {
      if (!this.buildingId) {
        return ''
      } else {
        var index = this.buildingList.findIndex(item => item.id === this.buildingId)
        if (index !== -1) {
          return this.buildingList[index].buildingName
        } else {
          return ''
        }
      }
    },
    //计量区域
    idFormatter() {
      if (!this.buildId) {
        return ''
      } else {
        var index = this.buildingOptionsChildList.findIndex(item => item.id === this.buildId)
        if (index !== -1) {
          return this.buildingOptionsChildList[index].buildingName
        } else {
          return ''
        }
      }
    }
  },
  created() {
    this.init();
  },
  watch: {
    buildId: {
      handler(newValue) {
        this.$emit('selectId', newValue)
      }
    },
    buildingId: {
      handler(newValue) {
        this.$emit('selectBuildingId', newValue)
      }
    }
  },
  methods: {
    init() {
      this.buildId = this.iniBuildId;
      this.buildingId = this.iniBuildingId;
      if (this.buildingId) {
        listBuildChildrenShowMaxWithParent({parentId: this.buildingId, buildingType: 3}).then(response => {
          this.buildingOptionsChildList = response.rows;
          this.buildingOptionsChild = handleTree(this.buildingOptionsChildList, 'id')
        });
      }
    },
    selectBuildingId(val) {
      this.$refs.treeselect.clear()
      if (val) {
        listBuildChildrenShowMaxWithParent({parentId: val, buildingType: 3}).then(response => {
          this.buildingOptionsChildList = response.rows;
          this.buildingOptionsChild = handleTree(this.buildingOptionsChildList, 'id')
        });
      } else {
        this.buildingOptionsChildList = []
        this.buildingOptionsChild = []
      }
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.buildingName,
        children: node.children
      };
    }
  }
}

</script>



